﻿@using BlazorSortableList.DemoApp.Client.Models

<div class="container">
    <h1 class="title is-size-1 has-text-centered">Force Fallback to JavaScript</h1>
    <p class="mb-4">Due to HTML5 drag and drop not being universally supported and the loss of control over the styling forceFallback is set to true by default for this library so the HTML5 drag and drop is not used. If preferred, you can set the 'ForceFallback' to false to get SortableJS's default behavior. The list on the left has 'ForceFallback' set to true, and the list on the right has ForceFallback set to false.</p>
    
    <TabControl>
        <TabPage Title="Example">
            <div class="columns">
                <div class="column">
                    <SortableList Id="forceFallback1" Items="items1" OnUpdate="@SortList1" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="forceFallback2" Items="items2" OnUpdate="@SortList2" Context="item" ForceFallback="false">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </TabPage>
        <TabPage Title="Code">
            <pre>@codeContent1</pre>
        </TabPage>
        <TabPage Title="Example V1.2">
            <div class="columns">
                <div class="column">
                    <SortableList Id="@ListId1" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor1 has-cursor-grab">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="@ListId2" GroupModel="@_group" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-border-light has-background-blazor1 has-cursor-grab">
                                <p class="is-size-4 p-2 custom-border">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>            
        </TabPage>
        <TabPage Title="Code V1.2">
            <pre>@codeContent2</pre>
        </TabPage>
    </TabControl>
</div>

@code {
    private const string ListId1 = "SharedListFallback1";
    private const string ListId2 = "SharedListFallback2";

    private string codeContent1 = @"
    <SortableList Id=""forceFallback1"" Items=""items"" OnUpdate=""@SortList"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card has-border-light has-background-blazor has-text-white has-cursor-grab"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    <SortableList Id=""forceFallback2"" Items=""items2"" OnUpdate=""@SortList"" Context=""item"" ForceFallback=""false"">
        <SortableItemTemplate>
            <div class=""card has-border-light has-background-blazor has-text-white has-cursor-grab"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>

    @code {
        public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        public List<Item> items2 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        private void SortList((int oldIndex, int newIndex) indices)
        {
            // deconstruct the tuple
            var (oldIndex, newIndex) = indices;

            var items = this.items;
            var itemToMove = items[oldIndex];
            items.RemoveAt(oldIndex);

            if (newIndex < items.Count)
            {
                items.Insert(newIndex, itemToMove);
            }
            else
            {
                items.Add(itemToMove);
            }

            StateHasChanged();
        }
    }
    ";

    private string codeContent2 = @"
    <SortableList Id=""@ListId1"" GroupModel=""@_group"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card has-border-light has-background-blazor1 has-cursor-grab"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    <SortableList Id=""@ListId2"" GroupModel=""@_group"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card has-border-light has-background-blazor1 has-cursor-grab"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    @code {
        private const string ListId1 = ""SharedListFallback1"";
        private const string ListId2 = ""SharedListFallback2"";
        public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        public List<Item> items2 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $""Item {i}"" }).ToList();

        ForceFallbackListGroup _group;

        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();

            var settings1 = new SortableListSettings() ;
            var settings2 = new SortableListSettings() { AllowHtml5DragAndDrop = true};

            _group = new ForceFallbackListGroup(ListId1, ListId2, () => StateHasChanged());
            _group.AddModel(ListId1, new SortableListModel<Item>(items1) { Settings = settings1 });
            _group.AddModel(ListId2, new SortableListModel<Item>(items2) { Settings = settings2 });
        }
    }
    ";

    public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    ForceFallbackListGroup _group;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        var settings1 = new SortableListSettings() ;
        var settings2 = new SortableListSettings() { AllowHtml5DragAndDrop = true};

        _group = new ForceFallbackListGroup(() => StateHasChanged());
        _group.AddModel(ListId1, new SortableListModel<Item>(items1) { Settings = settings1 });
        _group.AddModel(ListId2, new SortableListModel<Item>(items2) { Settings = settings2 });
    }

    private void SortList1((int oldIndex, int newIndex) indices)
    {
        // deconstruct the tuple
        var (oldIndex, newIndex) = indices;

        SortList(this.items1, oldIndex, newIndex);

        StateHasChanged();
    }

    private void SortList2((int oldIndex, int newIndex) indices)
    {
        // deconstruct the tuple
        var (oldIndex, newIndex) = indices;

        SortList(this.items2, oldIndex, newIndex);

        StateHasChanged();
    }

    private static void SortList(List<Item> items, int oldIndex, int newIndex)
    {
        var itemToMove = items[oldIndex];
        items.RemoveAt(oldIndex);

        if (newIndex < items.Count)
        {
            items.Insert(newIndex, itemToMove);
        }
        else
        {
            items.Add(itemToMove);
        }
    }

}